<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div style="width:28%; float:left;">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>菜单列表</legend>
            </fieldset>
            <div id="menu-tree" class="demo-tree demo-tree-box"
                 style="display: inline-block; width: 80%; height: 400px; padding: 10px; border: 1px solid #ddd; overflow: auto;"></div>
        </div>
        <div style="width:70%;float:right;">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 22px;">
                <legend>菜单详情</legend>
            </fieldset>
            <form class="layui-form layui-form-pane" name="form" onsubmit="return false;" data-ng-submit="submit()">
                <div class="layui-form-item">
                    <label class="layui-form-label">菜单名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="menuName" autocomplete="off" required lay-verify="required" data-tips-error-required="菜单名称不能为空" placeholder="请输入菜单名称" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">菜单地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="menuUrl" required lay-verify="required" autocomplete="off" placeholder="请输入菜单地址" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">菜单图标</label>
                    <div class="layui-input-inline" style="width:300px">
                        <input type="text" name="menuIcon" autocomplete="off" placeholder="请输入菜单图标" class="layui-input">
                    </div>
                    <div class="layui-input-inline">
                        <input type="text" id="iconPicker" lay-filter="iconPicker" class="hide">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">菜单序号</label>
                    <div class="layui-input-block">
                        <input type="text" name="menuCode" required lay-verify="required" autocomplete="off" placeholder="请输入菜单序号" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">权限地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="permission" required lay-verify="required" autocomplete="off" placeholder="请输入权限地址" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-block">
                        <input type="text" name="memo" autocomplete="off" placeholder="请输入备注" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit>修改</button>
                        <button type="button" ng-click="add()" class="layui-btn">新增</button>
                        <button type="button" ng-click="del(form)" class="layui-btn">删除</button>
                    </div>
                </div>
            </form>
        </div>

    </div>
</div>
<script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="../lib/qrcode/qrcode.js" charset="utf-8"></script>
<script src="../provider/layutil.js" charset="utf-8"></script>
<script>
    layui.use(['iconPickerFa', 'tree', 'form', 'table'], function () {
        var iconPickerFa = layui.iconPickerFa,
            tree = layui.tree,
            $ = layui.$,
            form = layui.form,
            table = layui.table;

        var list = [{
            "title": "后台",
            "id":"-1",
            "icon": "fa fa-address-book",
            "href": "",
            "target": "_self",
            "children": [
                {
                    "title": "系统管理",
                    "href": "",
                    "icon": "fa fa-home",
                    "target": "_self",
                    "children": [
                        {
                            "title": "用户管理",
                            "href": "page/sys_user/user-list.html",
                            "icon": "fa fa-tachometer",
                            "target": "_self"
                        },
                        {
                            "title": "角色管理",
                            "href": "page/sys_role/role-list.html",
                            "icon": "fa fa-tachometer",
                            "target": "_self"
                        },
                        {
                            "title": "菜单管理",
                            "href": "page/sys_menu/menu-list.html",
                            "icon": "fa fa-tachometer",
                            "target": "_self"
                        },
                        {
                            "title": "字典管理",
                            "href": "page/sys_dict/dict-list.html",
                            "icon": "fa fa-tachometer",
                            "target": "_self"
                        },
                        {
                            "title": "权限管理",
                            "href": "page/sys_permission/permission-list.html",
                            "icon": "fa fa-tachometer",
                            "target": "_self"
                        }
                    ]
                }
            ]
        },
            {
                "title": "常规管理",
                "icon": "fa fa-address-book",
                "href": "",
                "target": "_self",
                "children": [
                    {
                        "title": "主页模板",
                        "href": "",
                        "icon": "fa fa-home",
                        "target": "_self",
                        "children": [
                            {
                                "title": "主页一",
                                "href": "page/welcome-1.html",
                                "icon": "fa fa-tachometer",
                                "target": "_self"
                            },
                            {
                                "title": "主页二",
                                "href": "page/welcome-2.html",
                                "icon": "fa fa-tachometer",
                                "target": "_self"
                            },
                            {
                                "title": "主页三",
                                "href": "page/welcome-3.html",
                                "icon": "fa fa-tachometer",
                                "target": "_self"
                            }
                        ]
                    },
                    {
                        "title": "菜单管理",
                        "href": "page/menu.html",
                        "icon": "fa fa-window-maximize",
                        "target": "_self"
                    },
                    {
                        "title": "系统设置",
                        "href": "page/setting.html",
                        "icon": "fa fa-gears",
                        "target": "_self"
                    },
                    {
                        "title": "表格示例",
                        "href": "page/table.html",
                        "icon": "fa fa-file-text",
                        "target": "_self"
                    },
                    {
                        "title": "表单示例",
                        "href": "",
                        "icon": "fa fa-calendar",
                        "target": "_self",
                        "children": [
                            {
                                "title": "普通表单",
                                "href": "page/form.html",
                                "icon": "fa fa-list-alt",
                                "target": "_self"
                            },
                            {
                                "title": "分步表单",
                                "href": "page/form-step.html",
                                "icon": "fa fa-navicon",
                                "target": "_self"
                            }
                        ]
                    },
                    {
                        "title": "登录模板",
                        "href": "",
                        "icon": "fa fa-flag-o",
                        "target": "_self",
                        "children": [
                            {
                                "title": "登录-1",
                                "href": "page/login-1.html",
                                "icon": "fa fa-stumbleupon-circle",
                                "target": "_blank"
                            },
                            {
                                "title": "登录-2",
                                "href": "page/login-2.html",
                                "icon": "fa fa-viacoin",
                                "target": "_blank"
                            }
                        ]
                    },
                    {
                        "title": "异常页面",
                        "href": "",
                        "icon": "fa fa-home",
                        "target": "_self",
                        "children": [
                            {
                                "title": "404页面",
                                "href": "page/404.html",
                                "icon": "fa fa-hourglass-end",
                                "target": "_self"
                            }
                        ]
                    },
                    {
                        "title": "其它界面",
                        "href": "",
                        "icon": "fa fa-snowflake-o",
                        "target": "",
                        "children": [
                            {
                                "title": "按钮示例",
                                "href": "page/button.html",
                                "icon": "fa fa-snowflake-o",
                                "target": "_self"
                            },
                            {
                                "title": "弹出层",
                                "href": "page/layer.html",
                                "icon": "fa fa-shield",
                                "target": "_self"
                            }
                        ]
                    }
                ]
            },
            {
                "title": "组件管理",
                "icon": "fa fa-lemon-o",
                "href": "",
                "target": "_self",
                "children": [
                    {
                        "title": "图标列表",
                        "href": "page/icon.html",
                        "icon": "fa fa-dot-circle-o",
                        "target": "_self"
                    },
                    {
                        "title": "图标选择",
                        "href": "page/icon-picker.html",
                        "icon": "fa fa-adn",
                        "target": "_self"
                    },
                    {
                        "title": "颜色选择",
                        "href": "page/color-select.html",
                        "icon": "fa fa-dashboard",
                        "target": "_self"
                    },
                    {
                        "title": "下拉选择",
                        "href": "page/table-select.html",
                        "icon": "fa fa-angle-double-down",
                        "target": "_self"
                    },
                    {
                        "title": "文件上传",
                        "href": "page/upload.html",
                        "icon": "fa fa-arrow-up",
                        "target": "_self"
                    },
                    {
                        "title": "富文本编辑器",
                        "href": "page/editor.html",
                        "icon": "fa fa-edit",
                        "target": "_self"
                    },
                    {
                        "title": "省市县区选择器",
                        "href": "page/area.html",
                        "icon": "fa fa-rocket",
                        "target": "_self"
                    }
                ]
            },
            {
                "title": "其它管理",
                "icon": "fa fa-slideshare",
                "href": "",
                "target": "_self",
                "children": [
                    {
                        "title": "多级菜单",
                        "href": "",
                        "icon": "fa fa-meetup",
                        "target": "",
                        "children": [
                            {
                                "title": "按钮1",
                                "href": "page/button.html?v=1",
                                "icon": "fa fa-calendar",
                                "target": "_self",
                                "children": [
                                    {
                                        "title": "按钮2",
                                        "href": "page/button.html?v=2",
                                        "icon": "fa fa-snowflake-o",
                                        "target": "_self",
                                        "children": [
                                            {
                                                "title": "按钮3",
                                                "href": "page/button.html?v=3",
                                                "icon": "fa fa-snowflake-o",
                                                "target": "_self"
                                            },
                                            {
                                                "title": "表单4",
                                                "href": "page/form.html?v=1",
                                                "icon": "fa fa-calendar",
                                                "target": "_self"
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        "title": "失效菜单",
                        "href": "page/error.html",
                        "icon": "fa fa-superpowers",
                        "target": "_self"
                    }
                ]
            }];

        tree.render({
            elem: '#menu-tree',
            data: list,
            edit: ['add', 'update', 'del'], //操作节点的图标
            click: function(obj){
                layer.msg(JSON.stringify(obj.data));
            }
        });

        iconPickerFa.render({
            // 选择器，推荐使用input
            elem: '#iconPicker',
            // fa 图标接口
            url: "../lib/font-awesome-4.7.0/less/variables.less",
            // 是否开启搜索：true/false，默认true
            search: true,
            // 是否开启分页：true/false，默认true
            page: true,
            // 每页显示数量，默认12
            limit: 12,
            // 点击回调
            click: function (data) {
                console.log(data);
            },
            // 渲染成功后的回调
            success: function (d) {
                console.log(d);
            }
        });
    });
</script>
<script>

</script>

</body>
</html>